<template>
  <Boxer :mate="mate" :hasSelected="hasSelected" @action="handleButton" ref="Boxer">
    <div slot="search" class="search">
      <j-form :mate="mate.search" v-if="mate.search" v-on:search="search"></j-form>
    </div>
    <div slot="main">
      <el-row>
        <el-col :span="24">
          <el-table ref="table" :data="rows" border
                    @selection-change="handleSelectionChange" @sort-change="sortChange"
                    style="width: 100%"
          >
              <el-table-column type="selection" width="50"></el-table-column>
              <el-table-column v-for="col in mate.columns" :key="col.label"
                               :label="col.label" :prop="col.name"
                               :width="col.width" :sortable="col.sortable"
              ></el-table-column>
              <el-table-column label="操作" :width="actionWidth" v-if="mate.actions">
                <template scope="scope">
                  <k-btn
                         v-for="act in mate.actions" :key="act.index"
                         size="small" :act="act" :row="scope.row"
                         @action="handleAction"
                  ></k-btn>
                </template>
              </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center" class="page"  v-if="pSize > 0">
      <el-col :span="12">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="page"
          layout="total,prev, pager, next"
          :total="total"
          :page-size ="pSize">
        </el-pagination>
      </el-col>
      </el-row>
    </div>
  </Boxer>
</template>



<script>
import KBtn from '../element/KBtn.vue';
import Boxer from './Boxer.vue';

export default {
  components: {
    KBtn,
    Boxer,
    JForm: function index (resolve) {
      require(['./JForm.vue'], resolve);
    }
  },
  props: {
    mate: Object
  },
  data () {
    return {
      // 顶部按钮
      multipleSelection: [],
      hasSelected: false,
      // 查询
      searchValues: {},
      // 排序
      sortValues: {},
      action: null,
      // 分页变量
      page: 0,
      rows: [],
      pSize: 20,
      total: 0
    };
  },
  created () {
    this.updateData(this.mate);
  },
  watch: {
    multipleSelection (newSelection) {
      this.hasSelected = (newSelection.length !== 0);
    },
    mate  (newMate) {
      this.$nextTick(() => {
        this.updateData(newMate);
      });
    }
  },
  computed: {
    actionWidth () {
      return this.mate.actions.length * 60 + 30;
    }
  },
  //  mounted () {
  //    this.rowSelect();
  //  },
  // 需要添加刷新消息
  methods: {
    // 响应顶部按钮
    handleButton (btn) {
      let rows = (btn.multiSelect) ? {id: this.multipleSelection.map((r) => r.id)} : {};
      this.$root.post(btn, rows, btn.next).then(() => {
        // 不跳转就刷新
        this.getData();
      });
    },
    // 响应行按钮
    handleAction (act, row) {
      this.$root.action(act, {id: row.id}).then(() => {
        // 不跳转就刷新
        this.getData();
      });
    },
    /**
     * 重置选中行
     */
    rowSelect () {
      this.mate.rows.forEach(row => {
        /* eslint-disable */
        let select = (row.id && this.mate.selected && this.mate.selected.findIndex(id => id == row.id) !== -1);
        /* eslint-enable */
        this.$refs.table.toggleRowSelection(row, (select === true));
      });
    },
    /**
     * 响应选择动作
     */
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    /**
     * 相应翻页动作
     */
    handleCurrentChange (val) {
      console.log('翻页动作');
      this.page = val;
      this.getData();
    },
    /**
     * 重新远程获取数据
     */
    getData () {
      // console.log(this.mate.dataApi);
      let url = this.mate.dataApi;
      let param = {
        search: this.searchValues,
        page: this.page,
        sort: this.sortValues
      };
      this.$root.ajax(url, param).then((data) => {
        this.updateData(data);
      });
    },
    /**
     * 刷新数据
     */
    updateData (data) {
      if (data.rows) this.rows = data.rows;
      if (data.total) this.total = data.total;
      if (data.selected) this.selected = data.selected;
      if (data.size) this.pSize = data.size;
      this.$nextTick(() => { this.rowSelect(); });
    },
    /**
     * 排序动作
     */
    sortChange (sort) {
      if (!sort || !sort.column || !sort.column.sortable) return;
      this.sortValues = {order: sort.order, column: sort.prop};
      console.log('排序动作');
      this.getData();
    },
    /**
     * 查询时 页面自动重置
     *
     * @param data 查询参数
     */
    search (data) {
      this.searchValues = data;
      this.page = 0;
      console.log('查询动作');
      this.getData();
    }
  }
};
</script>

<style scoped>
  .page {
    margin-top: 20px;
  }

  .search {
    display: inline-block;
    margin-left: 30px;
    float: left;
  }
  .el-form--inline .el-form-item {
    margin-bottom: 0
  }
</style>
